<template>
  <BaseDialog :loading="loading" destroy-on-close @confirm="save" @close="close" confirmText="保存" v-model="isShow"
              :title="title">
    <el-form
        ref="formRef"
        :model="state.dataForm"
        :rules="rules"
        label-width="80px"
        @submit="save"
    >
      <el-row>
        <el-col :span="11">
          <el-form-item label="用户名称" prop="realName">
            <el-input placeholder="请输入用户名称" v-model="state.dataForm.realName"/>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="11">
          <el-form-item label="所属组织" prop="orgId">
            <SelectOrg enabledSwitch placeholder="请选择所属组织" v-model="state.dataForm.orgId"></SelectOrg>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="登录名称" prop="username">
            <el-input placeholder="请输入登录名称" v-model="state.dataForm.username"/>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="11">
          <el-form-item label="密码" prop="password">
            <el-input type="password" show-password placeholder="请输入密码" v-model="state.dataForm.password"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="用户编号" prop="userCode">
            <el-input placeholder="请输入用户编号" v-model="state.dataForm.userCode"/>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="11">
          <el-form-item label="证件编号" prop="numberId">
            <el-input placeholder="请输入证件编号" v-model="state.dataForm.numberId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="请输入手机号" v-model="state.dataForm.phone"/>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="11">
          <el-form-item label="邮箱" prop="mail">
            <el-input placeholder="请输入邮箱" v-model="state.dataForm.mail"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="年龄" prop="age">
            <el-input-number :min="0" :max="150" v-model="state.dataForm.age"/>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="11">
          <el-form-item label="性别" prop="gender">
            <BaseRadioButton dict="gender_dict" v-model="state.dataForm.gender"></BaseRadioButton>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col  :span="11">
          <el-form-item label="是否启用" prop="enabled">
            <BaseRadioButton dict="enable_dict" v-model="state.dataForm.enabled"></BaseRadioButton>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="主页" prop="homePage">
            <el-input placeholder="请输入主页" v-model="state.dataForm.homePage"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" placeholder="请输入备注" v-model="state.dataForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </BaseDialog>
</template>

<script setup lang="ts">

import {reactive, ref} from "vue";
import {UserModel} from "/@/api/system/model/UserModel";
import {insertUser, updateUser} from "/@/api/system/UserApi";
const emit = defineEmits([ 'load'])
const state = reactive({
  dataForm: {
    userId: '',
    realName: '',
    orgId: 1,
    password: '',
    username: '',
    phone: '',
    mail: '',
    userCode: '',
    numberId: '',
    age: 18,
    gender: 3,
    remark: '',
    homePage: '',
    enabled: 1,
    avatar: 1
  } as UserModel
})

const formRef = ref()
const loading = ref(false)
const isShow = ref(false)
const title = ref("")
const init = (titleValue: string, data: UserModel) => {
  if (data) {
    state.dataForm = {...state.dataForm,...data}
  }
  title.value = titleValue
  isShow.value = true
}
/**
 * 保存用户
 */
const save = async () => {
 await formRef.value.validate()
 loading.value = true
 if(state.dataForm.userId) {
   await updateUser(state.dataForm,()=>{
     loading.value = false
   })
 } else {
   await insertUser(state.dataForm,()=>[
     loading.value = false
   ])
 }
 emit('load',state.dataForm.orgId)
 close()
}
/**
 * 关闭
 */
const close = () => {
  state.dataForm = {
    userId: '',
    realName: '',
    orgId: 1,
    password: '',
    username: '',
    phone: '',
    mail: '',
    userCode: '',
    numberId: '',
    age: 18,
    gender: 3,
    remark: '',
    homePage: '',
    enabled: 1,
    avatar: 1
  } as UserModel
  isShow.value = false;
}

defineExpose({init})

const rules = {
  realName: [
    { required: true, message: '用户名称不能为空', trigger: 'blur' },
    { min: 1, max: 32, message: '组织名称长度为1到32个字符',trigger: 'blur'}
  ],
  username: [
    { required: true, message: '登录名称不能为空', trigger: 'blur' },
    { min: 1, max: 32, message: '登录名称长度为1到32个字符',trigger: 'blur'}
  ],
  orgId: [
    { required: true, message: '所属组织不能为空', trigger: 'blur' },
  ],
  password: [
    { min: 1, max: 64, message: '密码长度为1到64个字符',trigger: 'blur'}
  ],
  phone: [
    { min: 1, max: 32, message: '手机号长度为1到32个字符',trigger: 'blur'}
  ],
  numberId:[
    { min: 1, max: 64, message: '证件号码长度为1到64个字符',trigger: 'blur'}
  ],
  mail: [
    { min: 1, max: 64, message: '邮箱长度为1到64个字符',trigger: 'blur'}
  ],
  userCode: [
    { min: 1, max: 64, message: '用户编号为1到64个字符',trigger: 'blur'}
  ],
  homePage: [
    { min: 1, max: 255, message: '用户编号为1到255个字符',trigger: 'blur'}
  ],
  remark: [
    { min: 1, max: 255, message: '备注为1到255个字符',trigger: 'blur'}
  ]
}
</script>

<style scoped>

</style>